<!--问题表单-->
<template>
    <el-form :model="questionForm">
        <el-tabs type="border-card">
            <el-tab-pane label="问题信息">
                <el-form-item label="问题标题">
                    <el-input v-model="questionForm.questionTitle" autocomplete="off" />
                </el-form-item>
                <el-form-item label="问题内容">
                    <el-input v-model="questionForm.questionDes" autocomplete="off"
                        :autosize="{ minRows: 3, maxRows: 6 }" type="textarea" />
                </el-form-item>
                <el-form-item label="问题标签">
                    <el-cascader v-model="questionForm.questionTags" :options="tagOptions" :props="{ multiple: true }"
                        placeholder="标签分类" clearable filterable @change="handleTags" />
                </el-form-item>
            </el-tab-pane>

            <el-tab-pane label="问题源">
                <span>issue问题源</span>
                <el-form-item>
                    <el-table :data="questionForm.issueTableData" border style="width: 100%">
                        <el-table-column prop="issueId" label="ID" width="100" />
                        <el-table-column prop="issueTitle" label="标题" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="danger" @click="removeIssue(scope.$index)">移除</el-button>
                                <el-button type="primary" @click="console.log(scope.$index)">打开</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-select-v2 v-model="value" style="width: 240px" multiple filterable remote
                        :remote-method="remoteMethod" clearable :options="options" :loading="issueloading"
                        placeholder="请输入issue ID" />
                    <el-button type="primary" @click="">添加关联</el-button>
                </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="进度">未来实现</el-tab-pane>
        </el-tabs>
    </el-form>
</template>

<style scoped></style>

<script lang="ts">
export default {
    name: `QuestionForm`
}
</script>

<script setup lang="ts">
import { reactive, ref } from 'vue';

const props = defineProps({
    /**
     * 问题ID
     */
    questionId: {
        type: Number,
        default: 0
    }
})

interface Issue {
    issueId: string;
    issueTitle: string;
}

interface QuestionForm {
    questionTitle: string;
    questionDes: string;
    name: string;
    questionTags: string[];
    issueTableData: Issue[];
}

/**
 * 问题表单
 */
const questionForm = reactive<QuestionForm>({
    questionTitle: '',
    questionDes: '',
    name: '',
    questionTags: [],
    issueTableData: [
        {
            issueId: `IB8FNI`,
            issueTitle: '问题标题XXXXXXX'
        },
        {
            issueId: `IB8FNI`,
            issueTitle: '问题标题XXXXXXX'
        },
        {
            issueId: `IB8FNI`,
            issueTitle: '问题标题XXXXXXX'
        }
    ]

})
const tagOptions = ref(getTagOptions())

function getTagOptions() {
    return [
        {
            value: 1,
            label: '系统',
            children: [
                {
                    value: 2,
                    label: 'openKylin2.0',
                    children: [
                        { value: 3, label: '测试' },
                        { value: 4, label: '正式版' },
                    ],
                },
                {
                    value: 6,
                    label: 'openKylin1.0',
                    children: [
                        { value: 7, label: '测试' },
                        { value: 8, label: '正式版' },
                    ],
                }
            ],
        },
        {
            value: 9,
            label: '场景',
            children: [
                {
                    value: 10,
                    label: '办公',
                    children: [
                        { value: 11, label: '桌面' },
                        { value: 12, label: '设置' }
                    ],
                },
            ],
        }
    ]
}

/**
 * 问题标签
 */
const questionTags = ref([])

const handleTags = () => {
    console.log(questionTags.value.toString())
}

function removeIssue(id: number) {
    questionForm.issueTableData.splice(id, 1);
}

interface ListItem {
    value: string
    label: string
}

const value = ref([])
const options = ref<ListItem[]>([])
const issueloading = ref(false)

const states = [
    `NUll`
]
const list = states.map((item): ListItem => {
    return { value: `value:${item}`, label: `label:${item}` }
})

const remoteMethod = (query: string) => {
    if (query !== '') {
        issueloading.value = true
        setTimeout(() => {
            issueloading.value = false
            options.value = list.filter((item) => {
                return item.label.toLowerCase().includes(query.toLowerCase())
            })
        }, 200)
    } else {
        options.value = []
    }
}

</script>